<template>
    <el-dialog :append-to-body="true" :before-close="handleClose" :visible.sync="visible">
      <div style="margin-top:-25px;">
        <div class="dialog-title">
          <span>{{ isCreate ? '创建项目' : '编辑项目' }}</span>
        </div>
        <el-form :model="form" status-icon ref="form" label-width="100px" @submit.native.prevent>
          <el-form-item label="主题" prop="title">
            <el-input size="medium" v-model="form.title" placeholder="请填写主题"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-radio v-model="form.type" label="1">工作项目</el-radio>
            <el-radio v-model="form.type" label="2">学习项目</el-radio>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择项目状态">
                <el-option label="未开始" value="1"></el-option>
                <el-option label="进行中" value="3"></el-option>
                <el-option label="已结束" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" prop="tag">
            <el-select v-model="tag" @change="selectChange" placeholder="请选择标签">
              <el-option
                v-for="item in tags"
                :key="item.color"
                :label="item.tag"
                :value="item">
            </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input size="medium" v-model="form.description" type="textarea" :rows="3" placeholder="请填写描述">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="padding-left:5px;">
        <el-button type="primary" @click="submitForm" v-permission="{ permission: '编辑项目', type: 'disabled' }"
          >确 定</el-button
        >
        <el-button @click="resetForm('form')">重 置</el-button>
      </div>
    </el-dialog>
  </template>
  <script>

    import Project from '@/model/project'
  
  export default {
    components: {
    },
    props: {
      dialogFormVisible: {
        type: Boolean,
        default: false,
      },
      isCreate: {
        type: Boolean,
        default: false,
      },
      projectId: {
        type: Number,
        default: 0,
      },
    },
    computed: {
        visible: {
            get() {
                return this.dialogFormVisible
            },
            set() {},
        },
    },
    data() {
      return {
        display: true,
        initData: [],
        maxNum: 1,
        form: {
          title: '',
          type: "1",
          status: '',
          description: '',
          tag: '',
          color: '',
          backgroud_color: ''
        },
        tag: '', 
        tags: [
          {
            "tag": "红色",
            "color": "#FF0000",
            "backgroud_color": "rgba(255,86,86,0.20)"
          },
          {
            "tag": "橙色",
            "color": "#F45F04",
            "backgroud_color": "rgba(244,95,4,0.2)"
          },
          {
            "tag": "黄色",
            "color": "#FFE61F",
            "backgroud_color": "rgba(255,230,31,0.20)"
          },
          {
            "tag": "绿色",
            "color": "#06DE72",
            "backgroud_color": "rgba(6,222,114,0.20)"
          },
          {
            "tag": "青色",
            "color": "#08F5EA",
            "backgroud_color": "rgba(8,245,234,0.20)"
          },
          {
            "tag": "蓝色",
            "color": "#6DADFF",
            "backgroud_color": "rgba(109,173,255,0.20)"
          },
          {
            "tag": "紫色",
            "color": "#D6A9FF",
            "backgroud_color": "rgba(214,169,255,0.20)"
          },
          {
            "tag": "洋红",
            "color": "#FF86DA",
            "backgroud_color": "rgba(6,222,114,0.20)"
          },

        ]
      }
    },
    async mounted() {
      if (!this.isCreate) {
        const res = await Project.get(this.projectId)
        console.log(res)
        this.form = res
        this.tag = res.tag
        console.log(this.form)
      }
    },
    methods: {
      async submitForm() {
        const form = { ...this.form }
        console.log(form)
        let res
        if (this.isCreate) {
          res = await Project.add(form)
        } else {
          res = await Project.edit(this.projectId, form)
        }
        if (res.code < window.MAX_SUCCESS_CODE) {
          this.$message.success(`${res.message}`)
          this.$emit('dialogClose')
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      handleClose(done) {
        done()
        this.$emit('dialogClose')
      },
      selectChange(event) {
        this.tag = event.tag
        this.form.tag = event.tag
        this.form.color = event.color
        this.form.backgroud_color = event.backgroud_color
      }
    },
  }
  </script>
  <style lang="scss" scoped>
  .dialog-title {
    color: $parent-title-color;
    font-size: 16px;
    margin-bottom: 20px;
  }
  </style>
  